<template>
    <el-dialog width="800px" class="ex-diolog" :visible.sync="visible" :close-on-click-modal="false"
        :before-close="handleClose">
        <div slot="title" class="header-box">
            <div class="header-title">库存配置</div>
            <el-button type="primary" size="mini" @click="getDataDetails">刷新数据</el-button>
        </div>
        <div class="main" v-loading="loading">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" lab>
                <el-form-item label="商品id：">{{ ruleForm.goodsId }}</el-form-item>
                <el-form-item label="赚卡名称：">{{ ruleForm.name }}</el-form-item>
                <el-form-item label="抖音小程序：">
                    <div class="content-body">
                        <div class="cb-l">
                            <p v-if="ruleForm.douyinSellStatus == 1">待上架</p>
                            <p v-else-if="ruleForm.douyinSellStatus == 2">销售中</p>
                        </div>
                        <div class="cb-r">
                            <el-button type="primary" size="mini" @click="copyLink">复制链接</el-button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="微信视频号：">
                    <div class="content-body">
                        <div class="cb-l">
                            <p v-if="ruleForm.wxVideo == 1">未关联</p>
                            <p v-else-if="ruleForm.wxVideo == 2">已关联</p>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="剩余APP/小程序库存：" label-width="200px" :prop="isTypeOne ? 'originalSurplusInventory' : ''"
                    :key="isTypeOne ? '1' : '11'">
                    <div class="content-body">
                        <div class="cb-l">
                            <el-input placeholder="请输入APP/小程序库存" v-model="ruleForm.originalSurplusInventory"
                                v-if="isTypeOne" />
                            <p v-else>{{ ruleForm.originalSurplusInventory }}</p>
                        </div>
                        <div class="cb-r">
                            <el-button type="primary" size="mini" @click="saveType(1)" v-if="isTypeOne"
                                :loading="AgreeLoading">保存</el-button>
                            <el-button type="primary" size="mini" @click="changeType(1)" v-else>修改</el-button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="剩余抖音库存：" label-width="200px" :prop="isTypeTwo ? 'dySurplusInventory' : ''"
                    :key="isTypeTwo ? '2' : '12'">
                    <div class="content-body">
                        <div class="cb-l">
                            <el-input placeholder="请输入剩余抖音库存" v-model="ruleForm.dySurplusInventory" v-if="isTypeTwo" />
                            <p v-else>{{ ruleForm.dySurplusInventory }}</p>
                        </div>
                        <div class="cb-r">
                            <el-button type="primary" size="mini" @click="saveType(2)" v-if="isTypeTwo"
                                :loading="AgreeLoading">保存</el-button>
                            <el-button type="primary" size="mini" @click="changeType(2)" v-else>修改</el-button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="剩余视频号库存：" label-width="200px" :prop="isTypeThree ? 'wxVideoSurplusInventory' : ''"
                    :key="isTypeThree ? '3' : '13'">
                    <div class="content-body">
                        <div class="cb-l">
                            <el-input placeholder="请输入剩余视频号库存" v-model="ruleForm.wxVideoSurplusInventory"
                                v-if="isTypeThree" />
                            <p v-else>{{ ruleForm.wxVideoSurplusInventory }}</p>
                        </div>
                        <div class="cb-r">
                            <el-button type="primary" size="mini" @click="saveType(3)" v-if="isTypeThree"
                                :loading="AgreeLoading">保存</el-button>
                            <el-button type="primary" size="mini" @click="changeType(3)" v-else>修改</el-button>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>

    </el-dialog>
</template>
<script>
// api
import {
    inventoryInfoId,
    editInventoryInfo
} from "@/api/merchantsNFR/yeCard";
export default {

    props: {
        visible: Boolean,
        id: String,
    },
    data() {
        /* 大于0的整数 */
        var checkInteger = (rule, value, callback) => {
            //总库存限制数量校验
            let regNumber = /^\+?[0-9][0-9]*$/; //大于等于0的正整数
            if (value==='') {
                return callback(new Error("请输入"));
            } else if (regNumber.test(value) == false) {
                return callback(new Error("请输入大于等于0的正整数"));
            } else {
                return callback();
            }
        };
        return {
            title: "操作上下架",
            loading: false,
            AgreeLoading: false,
            isTypeOne: false,//APP/小程序库存
            isTypeTwo: false,//剩余抖音库存：
            isTypeThree: false,//剩余视频号库存：
            ruleForm: {
                originalSurplusInventory: '',
                dySurplusInventory: '',
                wxVideoSurplusInventory: '',
            },
            rules: {
                originalSurplusInventory: [
                    { validator: checkInteger, required: true, trigger: ["change", "bulr"] }
                ],
                dySurplusInventory: [
                    { validator: checkInteger, required: true, trigger: ["change", "bulr"] }
                ],
                wxVideoSurplusInventory: [
                    { validator: checkInteger, required: true, trigger: ["change", "bulr"] }
                ],
            },
        };
    },
    created() {

        if (this.isBatch) {
            this.title = "批量操作上下架"
        } else {
            this.title = "操作上下架"
        }
        console.log('this.id', this.id)
        this.getDataDetails()
    },
    methods: {
        // 获取信息详情
        getDataDetails() {
            inventoryInfoId(this.id).then(res => {
                if (this.isTypeOne == false) {
                    this.ruleForm.originalSurplusInventory = res.result.originalSurplusInventory
                }
                if (this.isTypeTwo == false) {
                    this.ruleForm.dySurplusInventory = res.result.dySurplusInventory
                }
                if (this.isTypeThree == false) {
                    this.ruleForm.wxVideoSurplusInventory = res.result.wxVideoSurplusInventory
                }
                this.ruleForm.merchantEquityCardId = res.result.merchantEquityCardId
                this.ruleForm.name = res.result.name
                this.ruleForm.douyinSellStatus = res.result.douyinSellStatus
                this.ruleForm.wxVideo = res.result.wxVideo
                this.ruleForm.shopId = res.result.shopId
                this.ruleForm.goodsId = res.result.goodsId
            })
        },
        // 刷新数据
        refreshData() {

        },
        // 复制链接
        copyLink() {
            var url = `pages/subPackages/pagesA/cardDetail/cardDetail?id=${this.id}&shopId=${this.ruleForm.shopId}`
            this.copyCenter(url)
        },
        // 复制链接
        copyCenter(value) { //复制
            console.log(value)
            if (value == undefined || value == '') {
                this.$message.error('复制失败,url地址不存在')
                return
            }
            //创建input标签
            var input = document.createElement('input')
            //将input的值设置为需要复制的内容
            input.value = value;
            //添加input标签
            document.body.appendChild(input)
            //选中input标签
            input.select()
            //执行复制
            document.execCommand('copy')
            //成功提示信息
            this.$message.success('复制成功')
            //移除input标签
            document.body.removeChild(input)
        },
        // 修改库存  1 APP/小程序库存 2 抖音库存 3 视频号库存	
        changeType(type) {
            if (type == 1) {
                this.isTypeOne = !this.isTypeOne
            } else if (type == 2) {
                this.isTypeTwo = !this.isTypeTwo
            } else if (type == 3) {
                this.isTypeThree = !this.isTypeThree
            }
        },
        // 保存库存 1 APP/小程序库存 2 抖音库存 3 视频号库存	
        saveType(type) {
            var data = {
                merchantEquityCardId: this.id,
                type: type
            }
            var check = ''
            if (type == 1) {
                data.inventory = this.ruleForm.originalSurplusInventory
                check = 'originalSurplusInventory'
            } else if (type == 2) {
                data.inventory = this.ruleForm.dySurplusInventory
                check = 'dySurplusInventory'
            } else if (type == 3) {
                data.inventory = this.ruleForm.wxVideoSurplusInventory
                check = 'wxVideoSurplusInventory'
            }

            this.$refs['ruleForm'].validateField(check, (errorMessage) => {
                let valid = errorMessage == '' ? true : false;
                if (valid) {
                    this.AgreeLoading = true
                    editInventoryInfo(data).then(res => {
                        this.$message.success(res.message)
                        this.AgreeLoading = false
                        this.$emit('success')
                        // this.getDataDetails()
                        this.changeType(type)
                    }).finally(() => {
                        this.AgreeLoading = false
                    })

                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //取消
        handleClose(formName) {
            this.$emit("update:visible", false);
        }
    }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
    ::v-deep .ex--dialog--footer {
        border: none !important;
        padding: 0 !important;
    }

    ::v-deep {
        .el-dialog__body {
            padding: 5px 30px 20px 30px;
        }

        .el-form-item__label {
            font-size: 17px;
            font-weight: 400;
        }

        .el-form-item__content {
            font-size: 16px;
        }

        .el-dialog__header {
            padding: 20px 30px;
        }

        .ex--dialog--main {
            padding: 10px 20px !important;
        }

        .el-form-item {
            margin-bottom: 20px;
        }
    }

    .content-body {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .cb-l {
            margin-right: 20px;
            width: 300px;
        }

        .cb-r {
            width: 100px;

            .el-button {
                width: 80px;
            }
        }
    }

    .header-box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-title {
        line-height: 24px;
        font-size: 18px;
        font-weight: bold;
        color: #303133;
        margin-right: 10px;
    }
}

.button_box {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}</style>
  